<template>
  <div>
    <h1>我是app.vue</h1>

    <!-- 使用组件时单标签要变双标签 -->
    <!-- 插槽作用： 可以让组件的html结构不写死 -->
    <!-- 也就是说让使用者可以自定义这个组件 -->
    <!-- <my-panel></my-panel>

      <my-panel>
        <h1>无题</h1>
      </my-panel>

      <my-panel>
          <div>
              <h3>我是h3</h3>
              <img style="width:100px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F548557edc0299.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665890760&t=a04d2c923e1a0b1b15edf78b5227258c" alt="">
              <a href="#">点我</a>
          </div>
      </my-panel> -->

    <!-- template标签没有任何意义 -->
    <!-- 只是vue提供的把一段东西包到一个整体里 -->
    <!-- 页面上会有template标签吗？ -->
    <my-panel>
      <!-- 把这部分的内容给名字叫title的插槽 -->
      <template v-slot:title>
        <h3>我是标题</h3>
        <a href="#">点我</a>
      </template>

      <!-- 把这部分内容给名字叫body的插槽 -->
      <template v-slot:body>
        <div>我是内容</div>
      </template>
    </my-panel>

    <!-- v-slot:插槽名字 可以简写为 #插槽名字 -->
    <my-panel>
      <!-- 把这部分的内容给名字叫title的插槽 -->
      <template #title>
        <h3>无题</h3>
      </template>

      <!-- 把这部分内容给名字叫body的插槽 -->
      <template #body>
        <div>
          <p>今天天气十分好</p>
          <p>传鹏来到桃花岛</p>
          <p>看到花姐在洗澡</p>
          <p>抓起衣服赶紧跑</p>
        </div>
      </template>

      <!-- 还想给默认插槽传，怎么办 -->
      <!-- 像这种没有包起来说给某个插槽的，那就是给默认插槽 -->
      <!-- <div>我在默认里</div>
        <div>我在默认里2</div>
        <div>我在默认里3</div> -->

      <!-- 其实默认插槽也有名字，只不过名字叫default -->
      <!-- 一般不会用这个名字，因为还不如不写名字更方便 -->
      <template #default>
        <div>我在默认里</div>
        <div>我在默认里2</div>
        <div>我在默认里3</div>
      </template>
    </my-panel>
  </div>
</template>

<script>
import MyPanel from "./components/MyPanel";
export default {
  components: {
    MyPanel,
  },
};
</script>

<style>
</style>